<template>
  <div class="popup-box">
    <van-popup v-model="isShowTest"
               class="order-popup"
               round
               :closeable="closeable"
               close-on-popstate
               position="bottom"
               :style="{'maxHeight':'70vh'}"
               @close="cancel"
               >
      <div class="popup-title" :class="titleBorder" v-if="title!=''">{{title}}</div>
      <div class="popup-content"><slot name="content"></slot></div>
      <div class="popup-btn-box">
        <div class="popup-confirm red-gra-btn" @click="confirm">{{confirmText}}</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { Popup } from 'vant'

Vue.use(Popup)
export default Vue.extend({
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    titleBorder: {
      type: String,
      default: ''
    },
    closeable: {
      type: Boolean,
      default: true
    },
    confirmText: {
      type: String,
      default: '确定'
    }
  },
  data() {
    return {
      isShowTest: false
    }
  },
  mounted() {

  },
  methods: {
    confirm() {
      this.isShowTest = false
      this.$emit('confirm', (res) => {
        if (!res) {
          this.isShowTest = true
        }
      })
    },
    cancel() {
      this.$emit('cancel')
    }
  },
  watch: {
    'isShow'(val) {
      this.isShowTest = val
    },
    'isShowTest'(val) {
      this.isShowTest = val
      // this.$emit('test', val)
      this.$emit('update:isShow', val)
    }
  }

})
</script>

<style lang="scss">
.order-popup{
  overflow: hidden;
  .van-popup__close-icon--top-right{
    right: 30px;
    top: 30px;
  }
  .popup-title{
    font-size: 32px;
    line-height: 100px;
    text-align: center;
    border-bottom: 1px solid #EDEDED;
    &.noBorder{
      border-bottom:0;
    }
  }
  .popup-content{
    max-height: calc(70vh - 236px);
    min-height: 30vh;
    overflow-y:scroll ;
  }
  .popup-btn-box{
    z-index: 999;
    background: #fff;
    padding: 0 25px 32px;
    .popup-confirm{
      font-size: 32px;
      color: #fff;
      height: 76px;
      line-height: 76px;
      text-align: center;
      border-radius: 48px;
    }
  }
}
</style>